<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet"
	href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet"
	href="/agent/css/font-awesome.min.css">
<script src="/agent/js/jquery.js"></script>
<script src="/agent/js/vue.js"></script>
<script src="/agent/js/main.js"></script>
<script src="/agent/layer/layer.js"></script>
<!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
<script
	src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>

<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script
	src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
<style>
.nav-top{position:absolute;width:100%;height:70px;background:#409EFF;color:#fff;line-height:70px;}
.nav-img-head{width:50px;height:50px;border-radius:50%;margin:10px;}
.nav-head-name{font-size:18px;}
.menu-list{position:absolute;width:180px;height:calc(100% - 70px);left:0;top:70px;background:#404F5E;padding:0;margin:0;list-style:none;color:#f1f1f1}
.menu-item{border-box:box-sizing;cursor:pointer;overflow:hidden;height:40px;user-select:none;transition:height 0.2s linear;}
.menu-child{background:#273039;}
.menu-name{height:40px;line-height:40px;border-bottom:1px solid #273039;}
.menu-name > i{display:inline-block;width:28px;margin-left:10px;}
.menu-child-name{padding-left:44px;color:#aaa;height:40px;line-height:40px;font-size:14px;}
.menu-child-name:hover{color:#fff;}
.frame-body{position:absolute;width:calc(100% - 180px);height:calc(100% - 80px);left:180px;top:70px;box-sizing:border-box;padding: 10px 10px 0 10px;}
.frame{width:100%;height:100%;border:none;}
.out-login{float:right;margin-right:20px;color:#fff;}
</style>
</head>
<body>
<div id="box">
	<!-- 导航 -->
	<div class="nav-top">
		<img src="/agent/images/user-head.jpg" class="nav-img-head">
		<span class="nav-head-name">欢迎进入HbCoin后台管理系统</span>
		<a href="{:url('login/outLogin')}" class="out-login">退出登录</a>
	</div>
	<!-- 菜单栏 -->
	<ul class="menu-list">
		<li class="menu-item" @click="showChild(key)" v-for="(item,key) in menu" :style="setMenuStyle(key)">
			<div class="menu-name">
				<i :class="item.icon"></i>
				<span>{{item.name}}</span>
			</div>
			<div class="menu-child" v-for="(items,keys) in item.child">
				<div class="menu-child-name" @click.stop="toUrl(items.url)">
					<span>{{items.name}}</span>
				</div>
			</div>
		</li>
	</ul>
	<!-- 显示栏 -->
	<div class="frame-body">
		<iframe :src="url" class="frame"></iframe>
	</div>
</div>
</body>
<script>
new Vue({
	el : '#box',
	data:{
		menu : [
			{
				name : '首页',
				icon : 'fa fa-home',
				show : false,
				child : [
					{
						name : '首页',
						url : '{:url("Index/home")}'
					}
				]
			},
			{
				name : '用户管理',
				icon : 'fa fa-user',
				show : false,
				child : [
					{
						name : '用户列表',
						url : '{:url("User/index")}'
					}
				]
			},
			{
				name : '用户财务',
				icon: 'fa fa-file-text',
				show : false,
				child : [
					{
						name : '交易订单',
						url : '{:url("Usercoin/trade")}'
					},
					{
						name : '充币记录',
						url : '{:url("Usercoin/userRecharge")}'
					},
					{
						name : '提币记录',
						url : '{:url("Usercoin/userCash")}'
					}
				]
			},
			{
				name : '代理财务',
				icon: 'fa fa-bar-chart',
				show : false,
				child : [
					{
						name : '财务列表',
						url : '{:url("act/finance")}'
					},
					{
						name : '提币记录',
						url : '{:url("act/cash")}'
					},
					{
						name : '充币记录',
						url : '{:url("act/recharge")}'
					}
				]
			}
		],
		menu_key : 0,
		menu_child : 0,
		url : ''
	},
	mounted:function(){
		this.url = this.menu[this.menu_key].child[this.menu_child].url;
	},
	methods:{
		//跳转连接
		toUrl:function(url){
			if(this.url == url) {
				this.url = '';
				var that = this;
				setTimeout(function(){
					that.url = url;
				});
			}else{
				this.url = url;
			}
		},
		setChildStyle:function(key,keys){
		},
		//设置菜单样式
		setMenuStyle:function(key){
			if(this.menu_key === key) {
				var height = this.menu[key].child.length * 40 + 40;
				return 'height:'+height+'px';
			}else{
				return 'height:40px;'
			}
		},
		//显示子菜单
		showChild:function(key){
			if(this.menu[key].show) {
				this.menu_key = '';
				this.menu[key].show = false;
			}else{
				this.closeAll(false);
				this.menu_key = key;
				this.menu[key].show = true;
			}
		},
		closeAll:function(bool){
			for(var i in this.menu) {
				this.menu[i].show = bool;
			}
		}
	}
});
</script>
</html>